<template>
  <div v-if="model.search && model.search.length > 0" ref="header">
    <jeesdp-form
        :fields="model.search"
        :model="context.params"
        :options="context.options"
        inline
    >
    </jeesdp-form>
    <div style="display: flex; justify-content: flex-end">
      <el-button-group>
        <el-button :title="'查询'" @click="context.load()">查询</el-button>
        <el-button :title="'清空'" @click="context.params = {}; context.load()">清空</el-button>
      </el-button-group>
    </div>
  </div>
  <div v-if="model.buttons && model.buttons.length > 0" ref="tools" style="padding: 0 0 20px 0;">
    <el-button-group>
      <template v-for="button in model.buttons">
        <el-button
            v-if="button.location === 'tools'"
            :icon="button.icon"
            :loading="button.loading"
            :title="button.title"
            :type="button.type"
            @click="buttons[button.code].click(context, instance)"
        />
      </template>
    </el-button-group>
  </div>
  <div ref="table">
    <jeesdp-table
        v-if="model.fields.length > 0"
        ref="datagrid"
        :data="data"
        :fields="model.fields"
        :loading="context.loading"
        :options="context.options"
        :page="context.page"
        :row-key="model.rowKey"
    />
  </div>

  <el-dialog
      v-model="context.visible"
      :close-on-click-modal="false"
      :title="context.title"
      :width="model.form.width"
  >
    <el-scrollbar max-height="500px" style="padding: 5px 15px">
      <jeesdp-form ref="form" :data="options" :fields="model.form.fields" :model="context.form" inline/>
    </el-scrollbar>
    <template #footer>
      <span class="dialog-footer">
        <template v-for="button in model.buttons">
              <el-button
                  v-if="button.location === 'dialog'"
                  :icon="button.icon"
                  :loading="button.loading"
                  :title="button.title"
                  :type="button.type"
                  @click="buttons[button.code].click(context, instance)"
              >
                {{ button.title }}
              </el-button>
            </template>
      </span>
    </template>
  </el-dialog>

</template>

<script setup>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";

defineOptions({
  name: "Datagrid"
});

const props = defineProps({
  model: {
    type: Object,
    required: true,
  },
  url: {
    type: String,
  },
  data: {
    type: Array,
  },
  options: {
    type: Object,
  },
});

const instance = getCurrentInstance();
const form = ref();
const tools = ref();
const table = ref();
const header = ref();
const datagrid = ref();

const context = reactive({
  form: {},
  data: [],
  params: {},
  options: {},
  title: '新增',
  loading: false,
  visible: false,
  page: {
    pageNum: 1,
    pageSize: 50,
    total: 100,
    currentChange(pageNum) {
      context.page.pageNum = pageNum;
      context.params.pageNum = pageNum;
      context.load();
    },
    sizeChange(pageSize) {
      context.page.pageSize = pageSize;
      context.params.pageSize = pageSize;
      context.load();
    },
  },
  load() {
    context.loading = true;
    if (props.url) {
      instance.proxy.$axios.post(props.url, context.params).then((res) => {
        context.data = res;
        context.loading = false;
      }).catch((err) => {
        context.loading = false;
      });
    } else if (props.data && props.data.length > 0) {
      context.data = props.data;
      context.loading = false;
    } else {
      instance.proxy.$axios.post('', context.params).then((res) => {
        context.data = res;
        context.loading = false;
      }).catch((err) => {
        context.loading = false;
      });
    }
  },
  reset() {
    form.value.reset();
  },
  clear() {
    form.value.clear();
  },
  validate(callback) {
    form.value.validate(callback);
  },
  getSelectedIds() {
    return datagrid.value.getSelectedRows().map(item => {
      return item[props.model.rowKey];
    });
  },
  getSelectedRows() {
    return datagrid.value.getSelectedRows();
  }
})

const setTableHeight = () => {
  table.value.style.height = `${table.value.parentNode.clientHeight - header.value.clientHeight - tools.value.clientHeight}px`
}
onMounted(() => {
  setTableHeight();
  window.addEventListener('resize', setTableHeight);
  context.model = props.model;
  for (let field of props.model.form.fields) {
    if (field.rules) {
      for (let rule of field.rules) {
        if (rule.validator) {
          rule.validator = instance.proxy.validators[rule.validator];
        }
        if (rule.message) {
          rule.message = eval(rule.message);
        }
      }
    }
  }

  if (props.model.buttons.length > 0) {
    props.model.fields.push({
      type: 'operation',
      label: "操作",
      buttons: props.model.buttons.map((button) => {
        if (button.location === 'table') {
          button.click = (row) => {
            context.row = row;
            instance.proxy.buttons[button.code].click(context, instance);
          };
          button.visible = (row) => {
            context.row = row;
            return instance.proxy.buttons[button.code].visible(context, instance);
          };
          return button;
        }
      }),
    });
  }
  context.load();
})
</script>
